<template>
  <div class="container">
    <div class="title-container">
      <h2>{{movietitle}}({{movies.length}}部)</h2>
    </div>
    <div class="content-container">
      <movie-item
        v-for="item in movies"
        :key="item.id"
        :title="item.title"
        :coverpath="item.imgSrc"
        :score="item.score"
      ></movie-item>
    </div>
  </div>
</template>

<script>
import MovieItem from "./MovieItem.vue";
export default {
  components: {
    MovieItem,
  },
  props:['movietitle','movies'],
  methods:{
    getval(id){
      this.$emit('deleteMe',id)
    }
  }
};
</script>

<style lang="scss">
.container {
  display: flex;
  width: 617px;
  height: 500px;
  flex-direction: column;
  .title-container {
    display: flex;
    width: 100%;
    height: 40px;
  }
  .content-container {
    display: flex;
    margin-top: 10px;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    flex-grow: 1;
  }
}
</style>